import { useEffect } from 'react';
import TagCanvas from './tagcanvas';

import './index.less';
//引入数据
import data from './index.json';

const setTextAttribute = () => {
  try {
    TagCanvas.Start('myCanvas', 'tags', {
      interval: 20,
      textColour: '#97d4ff',
      outlineColour: '#fff',
      shape: 'sphere',
      textHeight: 14,
      reverse: true,
      noMouse: true,
      depth: 0.5,
      dragControl: false,
      //                    decel:0.95,
      maxSpeed: 0.05,
      minSpeed: 0.05,
      initial: [-0.08, 0],
    });
  } catch (e) {
    console.log(e);
  }
};

const DemoWordCloud = () => {
  console.log(33);
  var config = {
    autoFit: true,
    data: data,
    wordField: 'name',
    weightField: 'value',
    colorField: 'name',
    //变矩形
    spiral: 'rectangular',
    wordStyle: {
      fontFamily: 'Verdana',
      fontSize: [8, 32],
      rotation: 0,
    },
    random: function random() {
      return 0.5;
    },
  };

  const textInfo = [
    {
      textKey: '金融在线',
    },
    {
      textKey: '保险欺诈',
    },
    {
      textKey: '现金价值',
    },
    {
      textKey: '互联网产品',
    },
    {
      textKey: '线上资料库',
    },
    {
      textKey: '保单贷款',
    },
    {
      textKey: '风险意识',
    },
    {
      textKey: '保额确定',
    },
    {
      textKey: 'E行销',
    },
    {
      textKey: '分红险',
    },
    {
      textKey: '保险红包',
    },
    {
      textKey: '签单法宝',
    },
    {
      textKey: '非法集资',
    },
    {
      textKey: '如何轻互动',
    },
    {
      textKey: '画图说保险',
    },
  ];
  const items = textInfo.map((item) => <a>{item.textKey}</a>);

  useEffect(() => {
    setTextAttribute();
  }, []);

  return (
    <div
      className="clond"
      style={{
        width: '90%',
        height: '95%',
        marginRight: '5%',
        paddingTop: '10%',
      }}
    >
      <div class="b_10_3">
        <canvas width="200" height="170" id="myCanvas"></canvas>
        <div id="tags">
          <a>{items}</a>
        </div>
      </div>
    </div>
  );
};

export default DemoWordCloud;